<template>
  <view class="container">
    <!-- 用户信息卡片 -->
    <view class="user-section">
      <view class="user-card">
        <view class="user-avatar-section">
          <image 
            class="user-avatar" 
            :src="userStore.avatar || userInfo.avatar || '/static/images/profile.jpg'" 
            mode="aspectFill"
            @click="goToProfile">
          </image>
          <view class="avatar-badge">
            <uni-icons type="checkmarkempty" size="12" color="#ffffff"></uni-icons>
          </view>
        </view>
        
        <view class="user-info">
          <view class="user-greeting">
            <text class="greeting-text">{{ getGreeting() }}</text>
            <text class="user-name">{{ userInfo.nickName || userInfo.userName || '用户' }}</text>
          </view>
          <view class="user-meta">
            <text class="user-dept">{{ userInfo.dept?.deptName || '若依科技' }}</text>
            <text class="user-role">{{ getUserRoleText() }}</text>
          </view>
        </view>
        
        <view class="user-actions">
          <button class="action-btn" @click="goToProfile" type="primary" size="mini" plain>
            <uni-icons type="contact" size="18" color="#1890ff"></uni-icons>
          </button>
        </view>
      </view>
    </view>

    <!-- 欢迎信息 -->
    <view class="welcome-section">
      <view class="welcome-card">
        <view class="welcome-header">
          <uni-icons type="calendar" size="20" color="#1890ff"></uni-icons>
          <text class="welcome-title">今日信息</text>
        </view>
        
        <view class="welcome-content">
          <view class="welcome-item">
            <text class="welcome-label">当前时间</text>
            <text class="welcome-value">{{ currentTime }}</text>
          </view>
          <view class="welcome-item">
            <text class="welcome-label">登录状态</text>
            <text class="welcome-value status-online">在线</text>
          </view>
          <view class="welcome-item">
            <text class="welcome-label">用户角色</text>
            <text class="welcome-value">{{ getUserRoleText() }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 应用介绍 -->
    <view class="app-intro">
      <view class="intro-header">
        <uni-icons type="info" size="20" color="#52c41a"></uni-icons>
        <text class="intro-title">应用介绍</text>
      </view>
      
      <view class="intro-content">
        <text class="intro-text">若依管理系统是一套全部开源的快速开发平台，毫无保留给个人及企业免费使用。</text>
        <view class="intro-features">
          <view class="feature-item">
            <uni-icons type="checkmarkempty" size="14" color="#52c41a"></uni-icons>
            <text class="feature-text">前后端分离架构</text>
          </view>
          <view class="feature-item">
            <uni-icons type="checkmarkempty" size="14" color="#52c41a"></uni-icons>
            <text class="feature-text">完善的权限管理</text>
          </view>
          <view class="feature-item">
            <uni-icons type="checkmarkempty" size="14" color="#52c41a"></uni-icons>
            <text class="feature-text">多端适配支持</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 系统信息 -->
    <view class="system-info">
      <view class="info-header">
        <text class="info-title">系统信息</text>
      </view>
      
      <view class="info-content">
        <view class="info-item">
          <text class="info-label">系统名称</text>
          <text class="info-value">若依管理系统</text>
        </view>
        <view class="info-item">
          <text class="info-label">系统版本</text>
          <text class="info-value">v4.7.8</text>
        </view>
        <view class="info-item">
          <text class="info-label">当前时间</text>
          <text class="info-value">{{ currentTime }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">运行环境</text>
          <text class="info-value">UniApp + Vue3</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance } from 'vue'
import { getUserProfile } from '@/api/system/user'
import { parseTime } from '@/utils/ruoyi'
import { useUserStore } from '@/store'

const { proxy } = getCurrentInstance()
const userStore = useUserStore()

// 数据定义
const userInfo = ref({})
const currentTime = ref('')

// 页面加载
onMounted(() => {
  updateTime()
  getUserInfo()
  
  // 定时更新时间
  setInterval(updateTime, 1000)
})

// 更新时间
function updateTime() {
  currentTime.value = parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}')
}

// 获取问候语
function getGreeting() {
  const hour = new Date().getHours()
  if (hour < 9) return '早上好，'
  if (hour < 12) return '上午好，'
  if (hour < 18) return '下午好，'
  return '晚上好，'
}

// 获取用户角色文本
function getUserRoleText() {
  if (userInfo.value.roles && userInfo.value.roles.length > 0) {
    return userInfo.value.roles[0].roleName
  }
  return '普通用户'
}

// 获取用户信息
async function getUserInfo() {
  try {
    const response = await getUserProfile()
    if (response.code === 200) {
      userInfo.value = response.data
    }
  } catch (error) {
    console.error('获取用户信息失败：', error)
  }
}


// 跳转到个人中心
function goToProfile() {
  uni.switchTab({
    url: '/pages/mine/index'
  })
}
</script>

<style lang="scss" scoped>
@import '@/styles/common.scss';

.container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding-bottom: env(safe-area-inset-bottom);
}

// 用户信息区域
.user-section {
  padding: 40px $space-lg 20px $space-lg;
  
  .user-card {
    @include flex-start;
    gap: $space-lg;
    padding: $space-xl;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: $radius-xl;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    
    .user-avatar-section {
      position: relative;
      
      .user-avatar {
        width: 60px;
        height: 60px;
        border-radius: $radius-full;
        border: 3px solid $white;
        box-shadow: $shadow-md;
      }
      
      .avatar-badge {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 20px;
        height: 20px;
        background: $success;
        border-radius: $radius-full;
        border: 2px solid $white;
        @include flex-center;
      }
    }
    
    .user-info {
      flex: 1;
      
      .user-greeting {
        margin-bottom: $space-xs;
        
        .greeting-text {
          font-size: $text-sm;
          color: $gray-600;
        }
        
        .user-name {
          font-size: $text-xl;
          font-weight: $font-bold;
          color: $gray-900;
          margin-left: $space-xs;
        }
      }
      
      .user-meta {
        .user-dept, .user-role {
          font-size: $text-sm;
          color: $gray-500;
          margin-right: $space-sm;
        }
      }
    }
    
    .user-actions {
      .action-btn {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        @include flex-center;
      }
    }
  }
}

// 欢迎信息
.welcome-section {
  padding: 0 $space-lg $space-lg $space-lg;
  
  .welcome-card {
    padding: $space-lg;
    background: $white;
    border-radius: $radius-lg;
    box-shadow: $shadow-sm;
    
    .welcome-header {
      @include flex-start;
      gap: $space-sm;
      margin-bottom: $space-lg;
      
      .welcome-title {
        font-size: $text-lg;
        font-weight: $font-bold;
        color: $gray-900;
      }
    }
    
    .welcome-content {
      .welcome-item {
        @include flex-between;
        padding: $space-md 0;
        border-bottom: 1px solid $border-color;
        
        &:last-child {
          border-bottom: none;
        }
        
        .welcome-label {
          font-size: $text-sm;
          color: $gray-600;
        }
        
        .welcome-value {
          font-size: $text-sm;
          color: $gray-900;
          font-weight: $font-medium;
          
          &.status-online {
            color: $success;
          }
        }
      }
    }
  }
}

// 应用介绍
.app-intro {
  margin: 0 $space-lg $space-lg $space-lg;
  padding: $space-lg;
  background: $white;
  border-radius: $radius-lg;
  box-shadow: $shadow-sm;
  
  .intro-header {
    @include flex-start;
    gap: $space-sm;
    margin-bottom: $space-lg;
    
    .intro-title {
      font-size: $text-lg;
      font-weight: $font-bold;
      color: $gray-900;
    }
  }
  
  .intro-content {
    .intro-text {
      font-size: $text-sm;
      color: $gray-600;
      line-height: 1.6;
      display: block;
      margin-bottom: $space-lg;
    }
    
    .intro-features {
      .feature-item {
        @include flex-start;
        gap: $space-sm;
        margin-bottom: $space-sm;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .feature-text {
          font-size: $text-sm;
          color: $gray-700;
        }
      }
    }
  }
}

// 系统信息
.system-info {
  margin: 0 $space-lg $space-lg $space-lg;
  padding: $space-lg;
  background: $white;
  border-radius: $radius-lg;
  box-shadow: $shadow-sm;
  
  .info-header {
    margin-bottom: $space-lg;
    
    .info-title {
      font-size: $text-lg;
      font-weight: $font-bold;
      color: $gray-900;
    }
  }
  
  .info-content {
    .info-item {
      @include flex-between;
      padding: $space-md 0;
      border-bottom: 1px solid $border-color;
      
      &:last-child {
        border-bottom: none;
      }
      
      .info-label {
        font-size: $text-sm;
        color: $gray-600;
      }
      
      .info-value {
        font-size: $text-sm;
        color: $gray-900;
        font-weight: $font-medium;
      }
    }
  }
}
</style>